<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>修改密码</title>
    <script src="/changePassward/tailwindcss3.4.16.js"></script>
    <link href="/changePassward/all.min.css" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
        }
        input[type="text"], input[type="password"] {
            transition: border-color 0.3s ease;
        }
        input[type="text"]:focus, input[type="password"]:focus {
            border-color: #3b82f6;
            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
        }
        button {
            transition: background-color 0.3s ease;
        }
    </style>
</head>
<body class="bg-gray-100 flex flex-col justify-center items-center h-screen space-y-8">
    <div class="bg-white p-8 rounded-2xl shadow-2xl w-full max-w-md space-y-6">
        <h2 class="text-3xl font-bold text-gray-800 text-center tracking-wide">修改密码</h2>
        <form id="changePasswordForm">
            <div>
                <label for="userName" class="block text-sm font-medium text-gray-700 mb-1">输入用户名</label>
                <div class="relative">
                    <input type="text" id="userName" class="shadow-sm appearance-none border border-gray-300 rounded-md w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-blue-500 focus:border-blue-500" required>
                    <i class="fa-solid fa-user absolute top-1/2 right-4 -translate-y-1/2 text-gray-400"></i>
                </div>
            </div>
            <div>
                <label for="oldPassword" class="block text-sm font-medium text-gray-700 mb-1">输入旧密码</label>
                <div class="relative">
                    <input type="password" id="oldPassword" class="shadow-sm appearance-none border border-gray-300 rounded-md w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-blue-500 focus:border-blue-500" required>
                    <i class="fa-solid fa-lock absolute top-1/2 right-4 -translate-y-1/2 text-gray-400"></i>
                </div>
            </div>
            <div>
                <label for="newPassword" class="block text-sm font-medium text-gray-700 mb-1">输入新密码</label>
                <div class="relative">
                    <input type="password" id="newPassword" class="shadow-sm appearance-none border border-gray-300 rounded-md w-full py-3 px-4 text-gray-700 leading-tight focus:outline-none focus:ring-blue-500 focus:border-blue-500" required>
                    <i class="fa-solid fa-lock absolute top-1/2 right-4 -translate-y-1/2 text-gray-400"></i>
                </div>
            </div>
            <br>
            <div class="flex justify-center space-x-4">
                <button type="submit" class="bg-blue-500 hover:bg-blue-600 text-white font-medium py-3 px-8 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-300">
                    修改密码
                </button>
                <a href="/" class="bg-gray-300 hover:bg-gray-400 text-gray-700 font-medium py-3 px-8 rounded-md focus:outline-none focus:ring-2 focus:ring-gray-300">
                    取消
                </a>
            </div>
        </form>
    </div>

    <script>
        document.getElementById('changePasswordForm').addEventListener('submit', function (e) {
            e.preventDefault();

            const userName = document.getElementById('userName').value;
            const oldPassword = document.getElementById('oldPassword').value;
            const newPassword = document.getElementById('newPassword').value;

            fetch('/user/changePassword', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/x-www-form-urlencoded'
                },
                body: `userName=${userName}&oldPassword=${oldPassword}&newPassword=${newPassword}`
            })
           .then(response => response.json())
           .then(data => {
                if (data.code === 'SUCCESS') {
                    alert('Password changed successfully!');
                } else {
                    alert(data.message);
                }
            })
           .catch(error => {
                alert('An error occurred: ' + error.message);
            });
        });
    </script>
</body>
</html>
    